<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-11 09:25:42
 * @LastEditTime: 2023-11-12 17:17:45
 * @LastEditors: sueRimn
-->


<template>
  <popup-bottom ref="popup" :title="'请选择'+serviceTypeText+'时间'">
    <template #default>
      <view class="container d-flex">
        <view class="days">
          <view class="item" v-for="item in multiArray" :key="item.day" :class="time[0] === item.day ? 'active' : ''"
            @click="$emit('handleDaysClick', item.day)">
            {{ showDay(item.day) }}
          </view>
        </view>
        <view class="hours">
          <view class="item" v-for="hour in hoursList" :key="hour" :class="time[1] === hour ? 'active' : ''"
            @click="$emit('handleHoursClick', hour)">
            {{ showHour(hour) }}
          </view>
        </view>
      </view>

    </template>
  </popup-bottom>
</template>

<script>

import { parseTime } from '@/utils'

export default {
  props: {
    serviceTypeText: { type: String, default: '' },
    multiArray: { type: Array, default: [] },
    time: { type: Array, default: [] },
  },
  computed: {
    hoursList() {
      return this.multiArray.find(item => item.day === this.time[0]).hour
    },
  },

  methods: {
    onOpen() {
      this.$refs.popup.open()
    },

    onClose() {
      this.$refs.popup.close()
    },

    // 时间展示
    showDay(day) {
      return parseTime(day, '{m}月{d}日 (周{a})')
    },
    // 时间展示
    showHour(time) {
      return time + ":00 - " + (parseInt(time) + 2) + ":00"
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 616rpx;
  padding: 0 30rpx;
}

.days {
  width: 40%;
  background: #F8F8F8;

  .item {
    color: #333;
    line-height: 88rpx;
    text-align: center;
  }

  .active {
    color: #000;
    font-weight: 500;
    background: #fff;
  }
}

.hours {
  width: 60%;

  .item {
    color: #444;
    line-height: 88rpx;
    padding-left: 40rpx;
  }

  .active {
    color: var(--hui-color-primary);
    font-weight: 500;
  }
}
</style>